<template>
	<div>
		<div style="padding: 20px 5px;">
			<div style="margin: 0 30px;">
				<el-form :inline='true' :model='borrowInfo' class="demo-form-inline">
					<el-row type='flex' justify="space-around">
						<el-col :span='8'>
							<el-form-item label="图书名称：">
								<el-input v-model="borrowInfo.bookName" placeholder="请输入" clearable @change='changeFun'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span='8'>
							<el-form-item label="ISBN号：">
								<el-input v-model="borrowInfo.isbn" placeholder="请输入" clearable @change='changeFun'></el-input>
							</el-form-item>
						</el-col>
						<el-col :span='8'>
							<el-form-item label="出版社：">
								<el-input v-model="borrowInfo.press" placeholder="请输入" clearable @change='changeFun'></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
		<div style="margin:10px 0 10px;" v-loading.lock='flag'>
			<el-table :data="tableData2" style="width: 99%;" :header-cell-style="{background:'rgb(235,236,240)',color:'#333'}">
				<el-table-column prop="no" label="借阅编号">
				</el-table-column>
				<el-table-column prop="isbn" label="ISBN号" width='180'>
				</el-table-column>
				<el-table-column prop="name" label="图书名称" width='180'>
				</el-table-column>
				<el-table-column prop="class" label="图书类型" width='180'>
				</el-table-column>
				<el-table-column prop="id" label="读者证件号" width='180'>
				</el-table-column>
				<el-table-column prop="lender" label="借阅人">
				</el-table-column>
				<el-table-column prop="borrowDate" label="借阅日期">
				</el-table-column>
				<el-table-column prop="returnDate" label="归还日期">
				</el-table-column>
				<el-table-column label="操作">
					<el-button size="medium" :plain='true' @click='lookupFun' type='success'>查看</el-button>
				</el-table-column>
			</el-table>
			<div class="paging">
				<el-pagination background layout="prev, pager, next" :total="100" @current-change='currentChangeFun'>
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default ({
		data() {
			return {
				borrowInfo: {
					bookName: '',
					isbn: '',
					press: ''
				},
				flag: false,
				tableData2: [{
						no: '01',
						isbn: '10001',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '02',
						isbn: '10002',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '03',
						isbn: '10003',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '04',
						isbn: '10004',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '05',
						isbn: '10006',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '07',
						isbn: '10007',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '08',
						isbn: '10008',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '09',
						isbn: '10009',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '10',
						isbn: '10010',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '11',
						isbn: '10011',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '12',
						isbn: '10012',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '13',
						isbn: '10013',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '14',
						isbn: '10014',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '15',
						isbn: '10016',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '17',
						isbn: '10017',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '18',
						isbn: '10018',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '19',
						isbn: '10019',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '20',
						isbn: '10020',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '21',
						isbn: '10021',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '22',
						isbn: '10022',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '23',
						isbn: '10023',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '24',
						isbn: '10024',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					},
					{
						no: '25',
						isbn: '10025',
						class: '计算机',
						name: 'Javascript高级程序设计',
						borrowDate: '2025-3-3',
						returnDate: '2025-6-20',
						id: '123456789',
						lender: '隔壁老王',
					}
				]
			}
		},
		methods: {
			changeFun: function() {
				this.flag = true;
				setTimeout(() => {
					this.flag = false;
				}, 1000);
			},
			lookupFun() {}
		}
	})
</script>

<style>
</style>
